<template>
    <div class="waterGate">
        <!-- <van-tabbar v-model="active">
            <van-tabbar-item name="home" icon="home-o"></van-tabbar-item>
        </van-tabbar> -->
        <van-nav-bar class="tabbar-bottom" title="设备" />

        <!-- <van-cell-group> -->
        <van-grid :column-num="3" :gutter="10">
            <van-grid-item v-for="gate in gates" :key="gate" icon="photo-o">
                <template v-if="gate.deviceStatus == 0">
                    <van-icon name="graphic" size="40" style="color: aqua;" />
                    <div class="tabbar-item-text"> {{ gate.deviceName }}</div>
                    <div class="tabbar-item-text"> 设备正常</div>
                    <div class="tabbar-item-text"> 水量： {{ gate.monthlyWaterVolume }}</div>
                </template>
                <template v-if="gate.deviceStatus == 1">
                    <van-icon name="graphic" size="40" style="color: red;" />
                    <div class="tabbar-item-text"> {{ gate.deviceName }}</div>
                    <div class="tabbar-item-text"> 设备故障</div>
                    <div class="tabbar-item-text"> 水量： {{ gate.monthlyWaterVolume }}</div>
                </template>
                <template v-if="gate.deviceStatus == 2">
                    <van-icon name="graphic" size="40" style="color: rgb(133, 128, 128);" />
                    <div class="tabbar-item-text"> {{ gate.deviceName }}</div>
                    <div class="tabbar-item-text"> 设备离线</div>
                    <div class="tabbar-item-text"> 水量： {{ gate.monthlyWaterVolume }}</div>
                </template>
            </van-grid-item>
        </van-grid>
        <!-- </van-cell-group> -->

        <van-tabbar v-model="active" @change="changeTabbar">
            <van-tabbar-item name="gate" icon="setting-o">设备管理</van-tabbar-item>
            <van-tabbar-item name="home" icon="manager-o">个人中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import 'vant/es/toast/style';
import callApi from "@/utils/callApi.js";
import { showFailToast } from 'vant';

export default {
    data() {
        return {
            gates: [],
            active: 'gate'
        };
    },


    created() {
        console.log("注册完毕，开始调用接口")
        this.getWaterGateList()
    },

    methods: {
        async getWaterGateList() {
            let res = await callApi({
                url: "/prod-api/device/getGateList",
                method: "get",
            });
            this.gates = res.data
            console.log("res:data: ", this.gates)
            // this.userInfo = res.data;
        },
        async changeTabbar() {
            console.log(this.active);
            if (this.active == "home") {
                showFailToast("暂未开放")
            }
        },
    },
};
</script>

<style lang="less">
.tabbar {
    &-bottom {
        margin-bottom: 15px;
    }

    &-item {
        &-text {
            font-size: 12px;
            text-align: center;
            margin-top: 2px;
        }
    }

}
</style>
